<style lang="less">
  .f-w70 {
    width: 70% !important;
  }
  .f-w90 {
    width: 90% !important;
  }
  .dialog-form-content{
    width: 350px
  }
</style>
<template>
  <section>
    <search-bar  more-display>
      <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input  v-model="searchForm.memberUserName" placeholder="请输入客户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户手机">
            <el-input  v-model="searchForm.memberUserPhone" placeholder="请输入客户手机"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <div class="f-mt f-wa">
      <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20" style="margin-bottom: 10px" @click="reset()">重置</el-button>
      <el-button type="primary" class="f-wa f-fr f-ml10 " style="margin-bottom: 10px" @click="findInfoFeeCount()">查询</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        border max-height="650"
        tooltip-effect="dark"
        style="width: 100% ;margin-top: 10px">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="memberUserName"
                         label="客户名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="memberUserPhone"
                         label="联系电话"
                         width="180">
        </el-table-column>
        <el-table-column prop="orderTotal"
                         label="总订单数"
                         width="180">
        </el-table-column>
        <el-table-column prop="orderPrice"
                         label="订单总额(元)"
                         width="180">
        </el-table-column>
        <el-table-column prop="infoFeeTotAmt"
                         label="信息费总额(元)"
                         width="180">
        </el-table-column>
        <el-table-column prop="infoFeeRolledOutAmt"
                         label="已提取金额(元)"
                         width="180">
        </el-table-column>
        <el-table-column prop="infoFeeRollOutAmt"
                         label="未提取金额"
                         width="180">
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button   type="primary" @click="detailsView(scope.row.userId)">查看明细</el-button>
            <el-button   type="primary" @click="withdrawalsRecordClick(scope.row.userId)">提取记录</el-button>
            <el-button  type="primary"
                        v-if="scope.row.infoFeeRollOutAmt > 0"
                        @click="cancelAccountClick(scope.row)">销账
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span style="float: left; margin-top: 10px;"><b>{{this.sumInfoFeeMsg}}</b></span>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right;margin-top: 10px">
      </el-pagination>

      <!--销账Dialog-->
      <el-dialog title="信息费销账" :visible.sync="cancelAccountDialog" size="tiny">
        <el-form ref="cancelAccountForm" :model="cancelAccountForm" label-width="120px">
          <el-form-item label="销账金额" prop="transAmt" :rules="[{required: true, type:'number', message: '请输入销账金额', trigger: 'blur'}]">
            <el-input class="f-w70" v-model.number="cancelAccountForm.transAmt"></el-input>
          </el-form-item>
          <el-form-item label="付款时间" prop="cashTime" :rules="[{required: true, type:'date', message: '请输入付款时间', trigger: 'blur'}]">
            <el-date-picker style="width: 70%"
                            v-model="cancelAccountForm.cashTime"
                            type="datetime"
                            placeholder="选择付款时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="到账银行" prop="flowChannel" :rules="[{required: true, type:'string', message: '请输入到账银行', trigger: 'blur'}]">
            <el-input class="f-w70" v-model="cancelAccountForm.flowChannel"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankCard" :rules="[{required: true, message: '请输入银行卡号', trigger: 'blur'},{ message: '请输入整数', validator:this.vaildNumber, trigger: 'blur'}]">
            <el-input class="f-w70" v-model="cancelAccountForm.bankCard"></el-input>
          </el-form-item>
          <el-form-item label="银行流水号" prop="serialNo" :rules="[{required: true, message: '请输入银行流水号', trigger: 'blur'},{ message: '请输入整数', validator:this.vaildNumber, trigger: 'blur'}]">
            <el-input class="f-w70" v-model="cancelAccountForm.serialNo"></el-input>
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input class="f-w70" type="textarea" v-model="cancelAccountForm.remark"></el-input>
          </el-form-item>
          <el-form-item label="交易凭证">
            <el-upload class="el-upload-wh"
                       :on-success="handleAvatarSuccess"
                       action="/api/v2.0/admin/file_upload"
                       ref="upload"
                       :file-list="fileList"
                       list-type="picture-card"
                       :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="50%" style="width: 40%" :src="dialogImageUrl" alt>
            </el-dialog>
            <label>只能上传jpg/png文件，且文件不超过2M</label>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancelAccountDialog = false">取消</el-button>
            <el-button type="primary" @click="saveCancelAccountBtn" :loading="submitLoading">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--提取记录Dialog-->
      <el-dialog title="提取记录" :visible.sync="withdrawalsRecordDialog" :close-on-click-modal="false" size="large">
        <search-bar more-display>
          <el-form :model="withdrawalsRecordDialogForm" ref="withdrawalsRecordDialogForm" label-width="80px">
            <el-row :span="24">
              <el-col :span="8">
                <el-form-item  label="提取方式" prop="EQ_cashWay">
                  <el-select v-model="withdrawalsRecordDialogForm.EQ_cashWay" class="f-w90"
                             @visible-change="searchCashWay"
                             filterable placeholder="请选择支付状态">
                    <el-option v-for="(o,index) in cashWay"
                               :label="o.cnDictValname"
                               :value="o.dictVal" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="提取时间" >
                  <el-date-picker
                    v-model="noWithdrawalsDate"
                    type="daterange"
                    placeholder="选择日期范围">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行卡号" >
                  <el-input class="f-w90" v-model="withdrawalsRecordDialogForm.EQ_bankCard" placeholder="请输入提取方式"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </search-bar>
        <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20 " style="margin: 10px"  @click="resetWithdrawals()">重置
        </el-button>
        <el-button type="primary" class="f-wa f-fr f-ml10  " style="margin: 10px" @click="btnWithdrawalsRecord()">查询</el-button>
        <el-table :data="withdrawalsTableData" border tooltip-effect="dark" style="width: 100% ;margin-top: 10px">
          <el-table-column prop="cashWay"  label="序号" width="210">
          </el-table-column>
          <el-table-column prop="cashTime"  label="提取时间" width="210">
          </el-table-column>
          <el-table-column prop="transAmt"  label="提取金额" width="210">
          </el-table-column>
          <el-table-column prop="cashWay"  label="提现方式" width="210">
          </el-table-column>
          <el-table-column prop="flowChannel"  label="到帐账户" width="210">
          </el-table-column>
          <el-table-column prop="bankCard"  label="银行卡号" width="210">
          </el-table-column>
          <el-table-column prop="serialNo"  label="流水号" width="210">
          </el-table-column>
          <el-table-column prop="remark"  label="备注" width="210">
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="withdrawalsCurrentPage"
          :page-size="withdrawalsPageSize"
          @size-change="withdrawalsHandleSizeChange"
          @current-change="withdrawalsHandleCurrentChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="withdrawalsTotal">
        </el-pagination>
      </el-dialog>
    </div>
  </section>
</template>

<script>
import {searchInfoFeeCount, sumFundMebacctForInfoFee, createFundMebacctProfitOutflow, searchFundMebacctProfitOutflowByUserId} from '../../api/fund/InfoFeeCount';
import {resetObjNull, isEmpty, objToFilter} from '../../lib/util.js';
import {getDictEntityByDictCode} from '../../api/system/Dict.js';

export default {
  data () {
    return {
      fileList: [],
      dialogVisible: false,
      cancelAccountDialog: false,
      submitLoading: false,
      withdrawalsRecordDialog: false,
      dialogImageUrl: '',
      withdrawalsRecordDialogForm: {
        EQ_cashWay: '',
        GT_cashTime: '',
        LT_cashTime: '',
        EQ_bankCard: ''
      },
      cancelAccountForm: {
        transAmt: '',
        cashTime: '',
        flowChannel: '',
        bankCard: '',
        serialNo: '',
        remark: '',
        images: '',
        mebId: ''
      },
      searchForm: {
        memberUserName: '',
        memberUserPhone: ''
      },
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      withdrawalsTableData: [],
      cashWay: [],
      noWithdrawalsDate: [],
      sumInfoFeeMsg: null,
      param: {
        filters: '',
        sorts: '',
        size: 15,
        page: 1
      },
      withdrawalsCurrentPage: 1,
      withdrawalsTotal: 0,
      withdrawalsPageSize: 10,
      withdrawalsParam: {
        filters: '',
        sorts: '',
        size: 15,
        page: 1
      },
      userId: ''
    };
  },
  watch: {
    noWithdrawalsDate (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.withdrawalsRecordDialogForm.GT_cashTime = val[0].toJSON();
        this.withdrawalsRecordDialogForm.LT_cashTime = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.withdrawalsRecordDialogForm.GT_cashTime = null;
        this.withdrawalsRecordDialogForm.LT_cashTime = null;
      }
    }
  },
  methods: {
    vaildNumber (rule, value, callback) {
      alert(value);
      if (!isEmpty(value) && isNaN(value)) {
        return callback(new Error('请输入整数'));
      }
      callback();
    },
    resetWithdrawals () {
      this.withdrawalsTableData = [];
      this.noWithdrawalsDate = [];
      resetObjNull(this.withdrawalsRecordDialogForm);
    },
    searchCashWay () {
      getDictEntityByDictCode({token: this.token, dictCode: 102018}).then((res) => {
        this.cashWay = res.data.detailModelList;
      });
    },
    findFundMebacctProfitOutflowByUserId (filters, pageSize, currentPage) {
      this.withdrawalsParam.filters = filters;
      this.withdrawalsParam.size = pageSize;
      this.withdrawalsParam.page = currentPage;
      searchFundMebacctProfitOutflowByUserId(this.withdrawalsParam).then((res) => {
        if (res.data.successFlg) {
          this.withdrawalsTableData = res.data.detailModelList;
          this.withdrawalsCurrentPage = res.data.currPage;
          this.withdrawalsTotal = res.data.totalCount;
          this.withdrawalsPageSize = res.data.pageSize;
        }
      });
    },
    btnWithdrawalsRecord () {
      let o = Object.assign({}, this.withdrawalsRecordDialogForm);
      this.withdrawalsParam.filters = objToFilter(o);
      this.withdrawalsParam.filters += ';EQ_mebId=' + this.userId;
      this.findFundMebacctProfitOutflowByUserId(this.withdrawalsParam.filters, this.withdrawalsPageSize, this.withdrawalsCurrentPage);
    },
    withdrawalsRecordClick (id) {
      this.userId = id;
      this.withdrawalsRecordDialog = true;
      this.withdrawalsParam.filters = 'EQ_mebId=' + this.userId;
      this.findFundMebacctProfitOutflowByUserId(this.withdrawalsParam.filters, this.withdrawalsPageSize, this.withdrawalsCurrentPage);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 和 png格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    saveCancelAccountBtn () {
      // 表单验证
      this.$refs['cancelAccountForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          createFundMebacctProfitOutflow(this.cancelAccountForm).then((res) => {
            this.submitLoading = false;
            if (res.data.successFlg === true) {
              this.cancelAccountDialog = false;
              this.init();
            } else {
              this.$message.error(res.data.errorMsg);
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleAvatarSuccess (res, file) {
      if (res.successFlg) {
        this.cancelAccountForm.images = isEmpty(this.cancelAccountForm.images) ? res.obj + ',' : this.cancelAccountForm.images + res.obj + ',';
      } else {
        this.$message.error('图片上传异常！请重新选择');
      }
    },
    cancelAccountClick (row) {
      this.fileList = [];
      if (this.$refs.cancelAccountForm) {
        this.$refs.cancelAccountForm.resetFields();
      }
      for (let p in this.cancelAccountForm) {
        if (this.cancelAccountForm[p] instanceof Array) {
          this.cancelAccountForm[p] = [];
        } else {
          this.cancelAccountForm[p] = null;
        }
      }
      this.cancelAccountForm.mebId = row.userId;
      this.cancelAccountDialog = true;
    },
    findInfoFeeCount () {
      let filters = JSON.stringify(this.searchForm);
      this.infoFeeCount(filters, this.pageSize, this.currentPage);
      this.findFundMebacctForInfoFee(this.searchForm.memberUserName, this.searchForm.memberUserPhone);
    },
    // 查询信息费
    infoFeeCount (filters, pageSize, currentPage) {
      if (!isEmpty(filters)) {
        this.param.filters = filters;
      }
      if (!isEmpty(pageSize)) {
        this.param.size = pageSize;
      }
      if (!isEmpty(currentPage)) {
        this.param.page = currentPage;
      }
      searchInfoFeeCount(this.param).then((res) => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
      }).catch(function (error) {
        this.$message.error('更新失败:' + error);
      });
    },
    findFundMebacctForInfoFee (realName, phone) {
      sumFundMebacctForInfoFee(realName, phone).then((res) => {
        if (res.data.successFlg) {
          this.sumInfoFeeMsg = res.data.obj;
        }
      });
    },
    init () {
      this.findFundMebacctForInfoFee(null, null);
      this.infoFeeCount();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.infoFeeCount(this.param.filters, this.pageSize, this.currentPage);
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.infoFeeCount(this.param.filters, this.pageSize, this.currentPage);
    },
    reset () {
      this.tableData = [];
      resetObjNull(this.searchForm);
      this.sumInfoFeeMsg = '统计：信息费总额0.0元，已提取总额0.0元，未提取总额0.0元';
    },
    detailsView (id) {
      this.$router.push('/settlement_platform/orderInfoFeeDetail/' + id);
    },
    // 每页几条操作
    withdrawalsHandleSizeChange (val) {
      this.withdrawalsPageSize = val;
      this.findFundMebacctProfitOutflowByUserId(this.withdrawalsParam.filters, this.withdrawalsPageSize, this.withdrawalsCurrentPage);
    },
    // 第几页操作
    withdrawalsHandleCurrentChange (val) {
      this.withdrawalsCurrentPage = val;
      this.findFundMebacctProfitOutflowByUserId(this.withdrawalsParam.filters, this.withdrawalsPageSize, this.withdrawalsCurrentPage);
    }
  },
  // 初始化数据
  mounted () {
    this.init();
  }
};
</script>
